<template>
    <view class="container">
        <header-bar :config="config" @rightClick="isShowMore = !isShowMore"></header-bar>
        <!-- 		<view class="pop" @touchmove.stop.prevent="moveHandle">
			<view class="custom-pop" :style="{'top':'44px'}" v-show="isShowMore">
				<view class="custom-pop-over">
					<easy-pop-over-menu :menus="moreMenus" @menuClick="menuClick"></easy-pop-over-menu>
				</view>
				<view class="custom-pop-bg" @click="isShowMore=false"></view>
			</view>
		</view> -->
        <view class="page-header" v-if="userData">
            <image src="/static/img/clientbg.png" class="bg"></image>
            <view class="header-left">
                <image class="avatar" src="/static/img/default.png"></image>
                <view class="info">
                    <view class="nickName text-show-line-2">{{ userData.StoreName }}</view>
                    <text class="tag">{{ userData.DealerGradeName }}</text>
                </view>
            </view>
            <view class="header-right">
                <view>
                    <text class="num-text">{{ userData.BalanceTotal }}</text>
                    <text class="label">账户余额</text>
                </view>
                <view>
                    <text class="num-text">{{ userData.RechargeBalance }}</text>
                    <text class="label">充值账户</text>
                </view>
                <view>
                    <text class="num-text">{{ userData.Balance }}</text>
                    <text class="label">返点账户</text>
                </view>
            </view>
        </view>
        <view class="tab-bar">
            <view class="tab-btn" :class="tabIndex == index ? 'current' : ''" v-for="(item, index) in tabs" :key="index"
                @click="clickTab(index)">
                <text>{{ item.name }}</text>
                <view class="tab-line"></view>
            </view>
        </view>
        <view class="main">
            <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
            <swiper v-if="userData && loadOk" class="swiper" :style="{ height: listHeight }" :current="tabIndex"
                @change="swiperChange">
                <swiper-item>
                    <customer-detail-info :StoreId="StoreId" :StoreUserId="StoreUserId" :userData="userData"
                        :height="listHeight"></customer-detail-info>
                </swiper-item>
                <swiper-item>
                    <customer-return-visit :StoreId="StoreId" :StoreUserId="StoreUserId" :height="listHeight">
                    </customer-return-visit>
                </swiper-item>
                <swiper-item>
                    <customer-visit-history :StoreId="StoreId" :StoreUserId="StoreUserId" :height="listHeight">
                    </customer-visit-history>
                </swiper-item>
                <swiper-item>
                    <customer-order-history :StoreId="StoreId" :StoreUserId="StoreUserId" :height="listHeight">
                    </customer-order-history>
                </swiper-item>
                <swiper-item>
                    <product-analysis :StoreId="StoreId" :StoreUserId="StoreUserId" :height="listHeight">
                    </product-analysis>
                </swiper-item>
                <swiper-item>
                    <behavior-portrayal :StoreId="StoreId" :userData="userData" :StoreUserId="StoreUserId"
                        :height="listHeight">
                    </behavior-portrayal>
                </swiper-item>
            </swiper>
            <view class="customer-footer" v-if="userData">
                <view @click="add">
                    <image src="/static/img/hf.png"></image>添加回访
                </view>
                <view @click="buyorder">
                    <image src="/static/img/dxd.png"></image>代下单
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getElementTop, getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"

import { GetGuideStoreDetail } from "@/service/api/store.js"

import easyPopOverMenu from "@/components/easy/easy-pop-over-menu.vue"
import customerDetailInfo from "@/pages/customer/detail-info.vue"
import customerReturnVisit from "@/pages/customer/return-visit.vue"
import customerVisitHistory from "@/pages/customer/visit-history.vue"
import customerOrderHistory from "@/pages/customer/order-history.vue"
import customerDataAnalysis from "@/pages/customer/data-analysis.vue"
import productAnalysis from "@/pages/customer/product-analysis.vue"
import behaviorPortrayal from "@/pages/customer/behavior-portrayal.vue"
export default {
    components: {
        easyPopOverMenu,
        customerDetailInfo,
        customerReturnVisit,
        customerVisitHistory,
        customerDataAnalysis,
        customerOrderHistory,
        productAnalysis,
        behaviorPortrayal
    },
    data() {
        return {
            config: {
                title: "客户详情",
                centerSlot: true,
                rightSlot: true,
                barPlaceholder: false,
                backgroundColor: [1, "none"],
                color: ["#ffffff"],
                // rightBtns: [{
                // 	id: 1,
                // 	type: 'more-filled',
                // }]
            },
            headshow: true,
            isShowMore: false,
            popTop: 0,
            moreMenus: [
                {
                    id: 1,
                    name: "修改",
                },
                {
                    id: 1,
                    name: "回访",
                },
                // {id:1,name:'报价单'},
                {
                    id: 1,
                    name: "代下单",
                },
            ],
            avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190522%2F479404bbce044c909180b46a68d1f12a.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631758861&t=5e4551a4b66540f5db8e092d0bdd9ea0",
            tabIndex: 0,
            tabs: [
                {
                    id: 1,
                    name: "基础信息",
                },
                {
                    id: 2,
                    name: "回访跟进",
                },
                {
                    id: 3,
                    name: "访问记录",
                },
                {
                    id: 4,
                    name: "订单记录",
                },
                {
                    id: 5,
                    name: "商品分析",
                },
                // {
                // 	id: 6,
                // 	name: "会员分析",
                // },
                {
                    id: 7,
                    name: "行为画像",
                },
                // {id:5,name:"数据分析"},
            ],
            timer: null,
            loadOk: false,
            listHeight: "200px",
            StoreId: 0,
            StoreUserId: 0,
            userData: null,
            isLoading: true,
        }
    },
    onShow() {
        this.getGuideStoreDetail()
    },
    onReady() { },
    mounted() { },
    onLoad(e) {
        if (e) {
            this.StoreId = e.StoreId
            this.StoreUserId = e.StoreUserId
        }
    },
    methods: {
        getTop() {
            getElementTop(this, ".pop", (e) => {
                this.popTop = e
            })
        },
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e - 60 + "px"
                this.loadOk = true
            })
        },
        rightClick(e) {
            if (e.id == 1) {
                //更多
                this.$refs.popMore.open()
            }
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                }, 20)
            }
        },
        //更多
        menuClick(e) {
            if (e == 0) {
                this.easyGoTo(`/pages/customer/add?StoreId=${this.StoreId}&StoreUserId=${this.StoreUserId}`)
            } else if (e == 1) {
            } else {
                this.isShowMore = false
                if (this.userData.Status != 1) {
                    this.easyToast("当前客户非正常状态，无法下单")
                    return
                }
                this.easyGoTo(
                    "/pages/product/index-valet?valetUserId=" +
                    this.StoreUserId +
                    "&valetUserInfo=" +
                    encodeURIComponent(JSON.stringify(this.userData)),
                )
            }
            this.isShowMore = false
        },
        add() {
            this.easyGoTo(
                "/pages/customer/recordVisit?StoreId=" +
                this.StoreId +
                "&StoreUserId=" +
                this.StoreUserId +
                "&address=" +
                `${this.userData.ProvinceName ? this.userData.ProvinceName : ""}${this.userData.CityName ? this.userData.CityName : ""
                }${this.userData.RegionName ? this.userData.RegionName : ""}${this.userData.StreetName ? this.userData.StreetName : ""
                }${this.userData.ContactAddress ? this.userData.ContactAddress : ""}`,
            )
        },
        buyorder() {
            if (this.userData.Status != 1) {
                this.easyToast("当前客户非正常状态，无法下单")
                return
            }
            // this.easyGoTo('/pages/product/index-valet?valetUserId=' + this.StoreUserId + "&valetUserInfo=" +
            // 	encodeURIComponent(JSON.stringify(this.userData)))
            this.easyGoTo(
                "/pages/customer/replace-order?valetUserId=" +
                this.StoreUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.userData)),
            )
        },
        getGuideStoreDetail() {
            var that = this
            let param = {
                storeId: this.StoreId,
                storeUserId: this.StoreUserId,
            }
            GetGuideStoreDetail(param).then((res) => {
                if (res.State == 1) {
                    this.userData = res.Data
                    //补充信息
                    this.userData.StoreId = this.StoreId
                    this.userData.StoreUserId = this.StoreUserId
                    setTimeout((e) => {
                        this.isLoading = false
                        this.getListHeight()
                    }, 200)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        onPageScroll(e) {
            this.handleScroll(e.scrollTop)
        },
        handleScroll(top) {
            if (top > 245) {
                this.headshow = false
            } else {
                this.headshow = true
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.pop {
    position: relative;
    z-index: 9;
}

.custom-pop {
    margin-top: var(--status-bar-height);
}

.custom-pop-bg {
    background: rgba(0, 0, 0, 0.1);
}

.page-header {
    position: relative;
    height: 452rpx;
    background: #252528;
    display: flex;
    flex-direction: column;
    padding: 0 24rpx;

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .header-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 150rpx 24rpx 0 24rpx;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 100rpx;
            margin-right: 28rpx;
        }

        .info {
            flex: 1;
            display: flex;
            align-items: center;

            text {
                color: $color-white;
            }

            .userName {
                margin-bottom: 6rpx;
            }

            .nickName {
                flex: 1;
                font-size: 44rpx;
                color: #ffffff;
                margin-right: 16rpx;
            }

            .tag {
                font-size: 24rpx;
                color: #ffffff;
                height: 42rpx;
                line-height: 42rpx;
                text-align: center;
                padding: 0 16rpx;
                background: $app-color-main;
                border-radius: 5rpx;
            }
        }
    }

    .header-right {
        position: absolute;
        width: calc(100% - 48rpx);
        bottom: 0;
        display: flex;
        justify-content: space-around;
        height: 136rpx;
        background: linear-gradient(180deg, #515252 0%, #393939 100%);
        border-radius: 16rpx 16rpx 0px 0px;

        text {
            color: $color-white;
        }

        .num-text {
            font-size: 40rpx;
            font-weight: 700;
            height: 56rpx;
        }

        &>view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .label {
            font-size: 24rpx;
            color: #ffffff;
        }
    }
}

.tab-bar {
    display: flex;
    // flex-direction: row;
    // position: sticky;
    // left: 0;
    // right: 0;
    // top: 44px;
    // align-items: center;
    height: 128rpx;
    z-index: 2;
    white-space: nowrap;
    padding: 0 $app-page-padding;
    justify-content: flex-start;
    overflow-x: auto;

    .tab-btn {
        padding: 0 18rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        // &:first-child {
        //     padding-left: 0;
        // }

        text {
            font-size: $font-size-30;
            font-weight: bold;
            margin-bottom: 8rpx;
        }
    }

    .tab-line {
        width: 32rpx;
        height: 6rpx;
        background: rgba(0, 0, 0, 0);
        border-radius: 4rpx;
    }

    .current {
        text {
            color: $app-color-main;
        }

        .tab-line {
            background: $app-color-main;
        }
    }
}

.customer-footer {
    position: fixed;
    width: 750rpx;
    height: 110rpx;
    left: 0;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;

    view {
        position: relative;
        display: flex;
        font-size: 30rpx;
        color: #333333;
        height: 120rpx;
        align-items: center;
        justify-content: center;
        width: 50%;

        &:first-child:after {
            content: "";
            width: 2rpx;
            height: 28rpx;
            background: #bfbfbf;
            position: absolute;
            right: 0;
        }
    }

    image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
    }
}
</style>
